<template>
	<scroll-view class="member-center" scroll-y @touchstart="handleTouchStart" @touchmove="handleTouchMove"
		@touchend="handleTouchEnd">
		<view class="product-detail">
			<view class="swiper" :style="{ height: bgHeight + 'rpx' }">
				<view class="swiper-container">
					<view class="swiper-icon">
						<image src="../../static/productDetail/icon13.png" class="icon" @click="back"></image>
					</view>
					<view class="swiper-icon">
						<image src="../../static/productDetail/icon14.png" class="icon"></image>
					</view>
				</view>
				<tn-swiper v-model="currentSwiperIndex" :data="swiperData" width="100%" height="420" indicator autoplay
					indicator-position="left-bottom" indicator-type="number" :style="{ height: bgHeight + 'rpx' }">
					<template #default="{ data }">
						<view class="swiper-data">
							<image class="image" :src="data" mode="aspectFill" style="width: 100%;"
								:style="{ height: bgHeight + 'rpx' }" />
						</view>
					</template>
				</tn-swiper>
			</view>
			<view class="product-detail-container">
				<!-- 价格和佣金信息 -->
				<view class="price-section">
					<view class="price-row">
						<view class="price-item item1">
							<text class="original-price">¥9.9</text>
							<text class="old-price">¥59.6</text>
						</view>
						<view class="price-item">
							<text class="commission">18%</text>
							<text class="commission-tag">{{ t('index.HighCommissions') }}</text>
						</view>
						<view class="price-item">
							<text class="price">¥1.78</text>
							<text class="commission-tag">{{ t('index.HighCommissions') }}</text>
						</view>
						<view class="price-item">
							<text class="commission">15%</text>
							<text class="commission-type">{{ t('productDetail.PublicCommission') }}</text>
						</view>
					</view>
				</view>

				<view class="product-info">
					<view class="top-container">
						<!-- 产品标题 -->
						<view class="product-title">
							Hộp Bánh Mứt Inochi - Haru: Chống Bụi, Bảo Quản Đồ Khô, Nâng Tầm Phong Cách Cho Ngôi Nhà Của
							Bạn
						</view>

						<!-- 价格范围 -->
						<view class="price-range">
							<div>74.999đ-125.000đ</div>
							<div>
								<image src="../../static/productDetail/icon12.png" style="width: 24rpx;height: 24rpx;">
								</image>
								<text>1.5k {{ t('product.Sold') }}</text>
							</div>
						</view>

						<!-- 销售信息 -->
						<view class="sales-info">
							<view class="sales-row">
								<text>{{ t('productDetail.Sales') }}</text>
								<uni-tag text="162" type="warning" size="small" />
								<text>{{ t('productDetail.stock') }}</text>
								<uni-tag text="192" type="primary" size="small" />
							</view>
							<view class="sales-row">
								<view class="sales-row-left">{{ t('productDetail.totalSales') }}</view>
								<view class="sales-row-right">{{ t('productDetail.SampleInventory') }}=61</view>
							</view>
						</view>

						<!-- 热销视频推荐 -->
						<view class="video-section">
							<view class="section-title">{{ t("productDetail.hotSelling") }}</view>
							<view class="section-subtitle">
								{{ t('productDetail.hotSellingTip') }}
							</view>
							<scroll-view scroll-x class="video-scroll">
								<view class="video-list">
									<view class="video-item" v-for="(item, index) in videos" :key="index">
										<image :src="item.cover" mode="aspectFill"
											style="width: 100%;height: 224rpx;" />
										<text class="video-title">{{ item.title }}</text>
									</view>
								</view>
							</scroll-view>
							<view class="data-source"><tn-icon name='tip'></tn-icon> {{ t('productDetail.dataSource') }}
							</view>
						</view>

					</view>
					<view class="bottom-container">
						<!-- 免费样品流程 -->
						<view class="sample-section">
							<view class="section-title">
								{{ t("productDetail.FreeSample") }}
								<text class="details-link">{{ t('productDetail.DetailsForNewcomers') }}</text>
							</view>
							<view class="sample-steps">
								<view class="step-item" v-for="(step, index) in sampleSteps" :key="index">
									<image :src="step.icon" mode="aspectFit" class="step-icon" />
									<text class="step-text">{{ step.text }}</text>
								</view>
							</view>
						</view>

						<!-- 变体选项 -->
						<uni-list-item title="Variation" showArrow thumb="../../static/productDetail/icon6.png" />
						<!-- <uni-list-item title="Variation" showArrow /> -->
						<!-- 30天促销数据 -->
						<view class="promotion-section">
							<view class="section-title">{{ t('productDetail.PromotionDataInThePast30Days') }}</view>
							<view class="promotion-tags">
								<uni-tag text="1000-2500 sales volume" type="error" />
								<uni-tag text="0-50 Page view" type="warning" />
								<uni-tag text="250-500 promotion" type="success" />
							</view>
							<!-- 销量图表 -->
							<view class="chart-container">
								<qiun-data-charts type="line" :opts="chartOpts" :chartData="chartData" />
							</view>
						</view>

						<!-- 底部按钮 -->
						<view class="bottom-buttons">
							<view class="main-buttons">
								<view class="icon-btn">
									<view class="">
										<image class="mini_icon" src="../../static/productDetail/mini_icon1.png"
											mode="">
										</image>
									</view>
									<view class="">
										<p>{{ t("common.Like") }}</p>
									</view>
								</view>
								<view class="icon-btn">
									<view class="">
										<image class="mini_icon" src="../../static/productDetail/mini_icon2.png"
											mode="">
										</image>
									</view>
									<view class="">
										<p>{{ t("common.Buy") }}</p>
									</view>
								</view>
								<view class="icon-btn" @click="showCopyMethod">
									<view class="">
										<image class="mini_icon" src="../../static/productDetail/mini_icon3.png"
											mode="">
										</image>
									</view>
									<view class="">
										<p>{{ t("common.Copy") }}</p>
									</view>
								</view>
								<view class="add-btn">{{ t('productDetail.AddToShowcase') }}</view>
								<view class="request-btn" type="primary" @click="showRequestSampleMethod">{{
								t('productDetail.RequestSample') }}
								</view>
							</view>
						</view>

					</view>
				</view>
			</view>
			<view style="height: 150rpx;">

			</view>
			<tn-popup v-model="showCopy" open-direction='bottom' close-btn>
				<view class="copy-container">
					<view class="success-icon-box">
						<image src="../../static/productDetail/success.png" mode="" style="width: 96rpx;height: 96rpx;">
						</image>
					</view>
					<view class="copy-tip">
						{{ t('productDetail.CopySuccessfully') }}
					</view>
					<view class="copy-link">
						https://affiliate.tiktok.com/api/v1/share/AJ8tCgt2SvyB
					</view>
					<view class="confirm-tip">
						{{ t("productDetail.ConfirmTip") }}
					</view>
					<view class="confirm-btn">
						<tn-button size="large" bg-color="#ff4d6a" width="688" height="84" text-color="#ffffff"
							@click="showCopy = false">{{ t("productDetail.Confirm") }}</tn-button>
					</view>
				</view>
			</tn-popup>
			<tn-popup v-model="showRequestSample" open-direction='bottom' close-btn height='1000'>
				<view class="sample-container">
					<view class="sample-top">
						<view class="sample-title">
							<image src="../../static/1.jpg" class="sample-image"></image>
						</view>
						<view class="sample-price">
							<view>¥89.92</view>
							<view>{{ t("productDetail.Commissions") }} </view>
							<view>
								<view class="card_discount">
									<view class="card_discount_right">
										{{ t("index.Earn") }}
									</view>
									<view class="card_discount_left">
										111
									</view>

								</view>
							</view>
						</view>
					</view>
					<view class="sample-bottom">
						<view class="sample-title">Loại</view>
						<view class="sample-list">
							<view v-for="item in 3" class="sample-item"
								:class="item == choseSampleValue ? 'active' : ''" :key="item"
								@click="choseSample(item)">
								<view class="sample-title">
									<image src="../../static/1.jpg" class="sample-image"></image>
								</view>
								<view class="sample-name">
									Hộp bánh mứt hoa Haru - Hồng
								</view>
							</view>
						</view>
						<view class="bottom-button">
							<tn-button size="large" bg-color="#ff4d6a" width="688" height="84" text-color="#ffffff"
								@click="showRequestSample = false">{{ t("productDetail.RequestSample") }}</tn-button>
						</view>
					</view>
				</view>
			</tn-popup>
		</view>
	</scroll-view>
</template>

<script setup lang="ts">
	import { ref } from 'vue'
	import {
		useI18n
	} from 'vue-i18n'

	const {
		t
	} = useI18n()
	const showCopy = ref(false)
	const showRequestSample = ref(false)
	const choseSampleValue = ref(0)
	// 视频数据
	const videos = ref([
		{
			cover: 'https://hz-dome-fish-oss.oss-cn-hangzhou.aliyuncs.com/upFiles/partner-product-img/d8a0d06c9f1f44cbb52b9ae62a5e55fftplv-aphluv4xwc-resize-jpeg300300.jpeg',
			title: 'Tết này tha hồ bay tiếp kh...'
		},
		{
			cover: 'https://hz-dome-fish-oss.oss-cn-hangzhou.aliyuncs.com/upFiles/partner-product-img/fbacd828ec1e48e4931e1bff00b58318tplv-aphluv4xwc-resize-jpeg300300.jpeg',
			title: 'Hộp đựng bánh mứt Haru màu'
		},
		{
			cover: 'https://hz-dome-fish-oss.oss-cn-hangzhou.aliyuncs.com/upFiles/partner-product-img/d066b7cd920a4fd7a391eb285a8a0de1tplv-aphluv4xwc-resize-jpeg300300.jpeg',
			title: 'Tết này tha hồ bay tiếp kh...'
		}
	])

	const currentSwiperIndex = ref(0)

	// 轮播图数据
	const swiperData = [
		'https://hz-dome-fish-oss.oss-cn-hangzhou.aliyuncs.com/upFiles/partner-product-img/d8a0d06c9f1f44cbb52b9ae62a5e55fftplv-aphluv4xwc-resize-jpeg300300.jpeg',
		'https://hz-dome-fish-oss.oss-cn-hangzhou.aliyuncs.com/upFiles/partner-product-img/fbacd828ec1e48e4931e1bff00b58318tplv-aphluv4xwc-resize-jpeg300300.jpeg',
		'https://hz-dome-fish-oss.oss-cn-hangzhou.aliyuncs.com/upFiles/partner-product-img/d066b7cd920a4fd7a391eb285a8a0de1tplv-aphluv4xwc-resize-jpeg300300.jpeg',
		'https://hz-dome-fish-oss.oss-cn-hangzhou.aliyuncs.com/upFiles/partner-product-img/eda7d06c2e7c434e987714bbaf0b7601tplv-aphluv4xwc-resize-jpeg300300.jpeg',
		'https://hz-dome-fish-oss.oss-cn-hangzhou.aliyuncs.com/upFiles/partner-product-img/b2595cf4493b4e4dbd35d10a3dccca01tplv-aphluv4xwc-resize-jpeg300300.jpeg',
		'https://hz-dome-fish-oss.oss-cn-hangzhou.aliyuncs.com/upFiles/partner-product-img/bba89ac443854299be3edce92b1ded6ftplv-aphluv4xwc-resize-jpeg300300.jpeg'
	]
	// 样品流程步骤
	const sampleSteps = ref([
		{ icon: '../../static/productDetail/icon1.png', text: t("productDetail.ApplySample") },
		{ icon: '../../static/productDetail/icon2.png', text: t("productDetail.ReviewRequest") },
		{ icon: '../../static/productDetail/icon3.png', text: t("productDetail.ReceivesSample") },
		{ icon: '../../static/productDetail/icon4.png', text: t("productDetail.PostVideoLive") },
		{ icon: '../../static/productDetail/icon5.png', text: t("productDetail.FulfillSales") }
	])

	// 图表配置
	const chartOpts = ref({
		color: ['#FF4D67'],
		padding: [15, 15, 0, 15],
		enableScroll: false,
		legend: { show: false },
		xAxis: { show: true },
		yAxis: { show: true },
		extra: {
			line: {
				type: 'straight',
				width: 2
			}
		}
	})

	// 图表数据
	const chartData = ref({
		categories: ['12-09', '12-15', '12-21', '12-27', '01-02', '01-07'],
		series: [{
			name: 'sales',
			data: [50, 100, 150, 100, 200, 150]
		}]
	})

	const back = () => {
		uni.navigateBack()
	}
	const showCopyMethod = () => {
		showCopy.value = true
	}

	const showRequestSampleMethod = () => {
		showRequestSample.value = true
	}

	const choseSample = (index) => {
		console.log(index)
		choseSampleValue.value = index
	}
	const bgHeight = ref(420); // 初始背景高度
	const startY = ref(0)
	const contentMarginTop = ref(0); // 让内容同步向下移动
	// 记录起始触摸点
	const handleTouchStart = (e) => {
		startY.value = e.touches[0].pageY;
	};

	// 计算下拉位移
	const handleTouchMove = (e) => {
		let moveY = e.touches[0].pageY - startY.value;
		// contentMarginTop.value = moveY
		if (moveY > 0) {
			bgHeight.value = Math.min(420 + moveY, 580); // 背景最大高度 450px
			contentMarginTop.value = Math.min(0 + moveY, 580); // 内容同步向下移动
		}
	};

	// 松手后恢复
	const handleTouchEnd = () => {
		const timer = setInterval(() => {
			if (bgHeight.value > 420) {
				bgHeight.value -= 5;
				contentMarginTop.value -= 5;
			} else {
				clearInterval(timer);
			}
		}, 10);
	};
</script>

<style lang="scss">
	.product-detail {
		// background-color: #fff;
		background: url("../../static/productDetail/bg.png") no-repeat center center/cover;

		.swiper {
			position: relative;

			.swiper-container {
				position: absolute;
				z-index: 10;
				display: flex;
				justify-content: space-between;
				margin: 40rpx 32rpx;
				width: 90%;

				.swiper-icon {
					.icon {
						width: 68rpx;
						height: 68rpx;
					}
				}
			}
		}
	}

	.product-detail-container {
		// padding: 20rpx;
		background: url("../../static/productDetail/bg.png") no-repeat center center/cover;

	}

	.product-info {
		.top-container {
			padding: 20rpx;
		}

		.bottom-container {
			background-color: #efefef;

			>view {
				padding: 28rpx 32rpx 0 32rpx;
			}
		}
	}

	.price-section {
		background-color: white;

		.price-row {
			display: flex;
			justify-content: space-between;
			align-items: flex-start;
			margin-top: 20rpx;
			padding-bottom: 12rpx;

			.item1 {
				font-family: HarmonyOS Sans SC, HarmonyOS Sans SC;
				font-weight: 900;
				font-size: 32rpx;
				color: #FD2D55;
				line-height: 38rpx;
			}

			.price-item {
				display: flex;
				flex-direction: column;
				align-items: flex-start;
				border-right: 2rpx solid #eee;

				.original-price {
					font-size: 32rpx;
					color: #FF4D67;
					font-weight: bold;
					margin-left: 32rpx;
					margin-right: 14rpx;
					margin-bottom: 16rpx;
				}

				.old-price {
					font-family: HarmonyOS Sans SC, HarmonyOS Sans SC;
					font-weight: 400;
					font-size: 16rpx;
					color: #333333;
					line-height: 23rpx;
					margin-left: 32rpx;
				}

				.commission {
					font-family: HarmonyOS Sans SC, HarmonyOS Sans SC;
					font-weight: 900;
					font-size: 28rpx;
					color: #FD2D55;
					line-height: 38rpx;
					margin-left: 14rpx;
					margin-right: 110rpx;
					margin-bottom: 10rpx;
				}

				.commission-tag {
					height: 26rpx;
					background: #FD2D55;
					border-radius: 4rpx 4rpx 16rpx 4rpx;
					font-family: HarmonyOS Sans SC, HarmonyOS Sans SC;
					font-weight: 400;
					font-size: 16rpx;
					color: #FFFFFF;
					line-height: 19rpx;
					padding: 4rpx 10rpx;
					margin-left: 14rpx;
					margin-right: 14rpx;
				}

				.price {
					font-family: HarmonyOS Sans SC, HarmonyOS Sans SC;
					font-weight: 900;
					font-size: 32rpx;
					color: #FD2D55;
					line-height: 38rpx;
					margin-left: 14rpx;
					margin-bottom: 10rpx;
				}

				.commission-type {
					width: 112rpx;
					height: 48rpx;
					font-family: HarmonyOS Sans SC, HarmonyOS Sans SC;
					font-weight: 400;
					font-size: 20rpx;
					color: #333333;
					line-height: 23rpx;
					text-align: left;
					font-style: normal;
					text-transform: none;
				}
			}
		}
	}

	.product-title {
		font-size: 32rpx;
		line-height: 1.4;
	}

	.price-range {
		font-size: 28rpx;
		color: #FF4D67;
		margin-bottom: 20rpx;
		margin-top: 20rpx;
		display: flex;
		justify-content: space-between;
	}

	.sales-info {
		.sales-row {
			display: flex;
			align-items: center;
			gap: 20rpx;
			margin-bottom: 10rpx;
			font-size: 24rpx;
			color: #666;

			.sales-row-left,
			.sales-row-left {
				padding: 8rpx 20rpx;
				background: #F6F6F6;
				border-radius: 4rpx 4rpx 4rpx 4rpx;
			}
		}
	}

	.video-section {
		margin: 64rpx 0;
		font-family: HarmonyOS Sans SC, HarmonyOS Sans SC;
		font-weight: bold;
		font-size: 30rpx;
		color: #333333;
		line-height: 35rpx;
		margin-bottom: 20rpx;

		.section-title {
			font-size: 32rpx;
			font-weight: bold;
			margin-bottom: 10rpx;
		}

		.section-subtitle {
			font-family: HarmonyOS Sans SC, HarmonyOS Sans SC;
			font-weight: 400;
			font-size: 24rpx;
			color: #999999;
			line-height: 32rpx;
			margin-bottom: 20rpx;
		}

		.video-scroll {
			white-space: nowrap;

			.video-list {
				display: flex;

				.video-item {
					margin-right: 20rpx;
					width: 300rpx;
					display: flex;
					flex-direction: column;
					background: #F6F6F6;

					image {
						width: 200rpx;
						height: 224rpx;
						border-radius: 0rpx 0rpx 0rpx 0rpx;
					}

					.video-title {
						width: 200rpx;
						background: #F6F6F6;
						border-radius: 0rpx 0rpx 0rpx 0rpx;
						font-family: HarmonyOS Sans SC, HarmonyOS Sans SC;
						font-weight: 400;
						font-size: 20rpx;
						color: #333333;
						padding: 16rpx;
					}
				}
			}
		}

		.data-source {
			font-family: HarmonyOS Sans SC, HarmonyOS Sans SC;
			font-weight: 400;
			font-size: 24rpx;
			color: #999999;
			line-height: 32rpx;
			text-align: left;
			font-style: normal;
			text-transform: none;
			margin-top: 32rpx;
		}
	}

	.sample-section {
		margin: 30rpx 0;
		background-color: #fff;

		.section-title {
			display: flex;
			justify-content: space-between;
			align-items: center;
			margin-bottom: 20rpx;
			font-family: HarmonyOS Sans SC, HarmonyOS Sans SC;
			font-weight: bold;
			font-size: 30rpx;
			color: #333333;
			line-height: 35rpx;

			.details-link {
				font-size: 24rpx;
				color: #666;
			}
		}

		.sample-steps {
			display: flex;
			justify-content: space-between;
			padding-bottom: 20rpx;

			.step-item {
				display: flex;
				flex-direction: column;
				align-items: center;
				width: 20%;

				.step-icon {
					width: 68rpx;
					height: 68rpx;
					margin-bottom: 10rpx;
				}

				.step-text {
					width: 78rpx;
					height: 56rpx;
					font-family: HarmonyOS Sans SC, HarmonyOS Sans SC;
					font-weight: 400;
					font-size: 24rpx;
					color: #333333;
					line-height: 28rpx;
					text-align: center;
				}
			}
		}
	}

	.promotion-section {
		background: url("../../static/productDetail/bg2.png") no-repeat center center/cover;
		margin-top: 20rpx;

		.section-title {
			font-family: HarmonyOS Sans SC, HarmonyOS Sans SC;
			font-weight: bold;
			font-size: 30rpx;
			color: #333333;
			line-height: 35rpx;
		}

		.promotion-tags {
			display: flex;
			gap: 20rpx;
			margin: 20rpx 0;

			.uni-tag {
				border-radius: 20rpx 20rpx 20rpx 20rpx;
				text-align: center;
			}
		}

		.chart-container {
			height: 400rpx;
		}
	}

	.bottom-buttons {
		position: fixed;
		bottom: 0;
		left: 0;
		right: 0;
		background: #fff;
		box-shadow: 0 -2rpx 10rpx rgba(0, 0, 0, 0.05);
		height: 140rpx;

		.main-buttons {
			display: flex;
			gap: 20rpx;

			flex: 1;
			height: 80rpx;
			line-height: 80rpx;
			font-size: 28rpx;
			border-radius: 40rpx;

			.add-btn {
				width: 234rpx;
				height: 72rpx;
				background: #00E0F4;
				border-radius: 8rpx 8rpx 8rpx 8rpx;
				font-family: HarmonyOS Sans SC, HarmonyOS Sans SC;
				font-weight: bold;
				font-size: 22rpx;
				color: #FFFFFF;
				line-height: 32rpx;
				text-align: center;
				line-height: 72rpx;
				margin-top: 10rpx;

			}

			.request-btn {
				width: 226rpx;
				height: 72rpx;
				background: #FD2D55;
				border-radius: 8rpx 8rpx 8rpx 8rpx;
				font-family: HarmonyOS Sans SC, HarmonyOS Sans SC;
				font-weight: bold;
				font-size: 22rpx;
				color: #FFFFFF;
				line-height: 72rpx;
				text-align: center;
				margin-top: 10rpx;
			}

		}

		.action-buttons {
			display: flex;
			justify-content: space-around;
			margin-bottom: 20rpx;


		}

	}

	.icon-btn {
		font-size: 24rpx;
		color: #666;
		width: 32rpx;
		height: 80rpx;
		display: flex;
		flex-direction: column;
		margin-right: 32rpx;

		>view {
			width: 40rpx;
			height: 40rpx;
		}

		.mini_icon {
			width: 40rpx;
			height: 40rpx;
		}

		&::after {
			display: none;
		}
	}

	.swiper-container {
		width: 100%;
		height: 420rpx;

		.swiper-data {
			width: 100%;
			height: 100%;
			border-radius: 30rpx;

			.image {
				width: 100% !important;
				height: 100% !important;
				border-radius: inherit;
			}
		}
	}

	.uni-list-item {
		padding: 0 !important;
	}

	.tn-popup__content {
		height: 45%;
	}

	.copy-container {
		height: 550rpx;

		.success-icon-box {
			text-align: center;
			margin-top: 60rpx;

			.success-icon {
				margin: auto;
			}

		}

		.copy-tip {
			width: 630rpx;
			height: 72rpx;
			font-family: HarmonyOS Sans SC, HarmonyOS Sans SC;
			font-weight: bold;
			font-size: 30rpx;
			color: #333333;
			line-height: 35rpx;
			text-align: center;
			margin: auto;
			margin-top: 60rpx;
		}

		.copy-link {
			width: 686rpx;
			height: 68rpx;
			background: #e9e5e5;
			border-radius: 4rpx 4rpx 4rpx 4rpx;
			font-family: HarmonyOS Sans SC, HarmonyOS Sans SC;
			font-weight: 400;
			font-size: 24rpx;
			color: #333333;
			line-height: 68rpx;
			text-align: center;
			margin: 32rpx auto 12rpx;
		}

		.confirm-tip {
			margin: auto;
			width: 90%;
			height: 28rpx;
			font-family: HarmonyOS Sans SC, HarmonyOS Sans SC;
			font-weight: 400;
			font-size: 24rpx;
			color: #FD2D55;
			line-height: 28rpx;
			text-align: right;
			font-style: normal;
			text-transform: none;
			margin-bottom: 40rpx;
		}

		.confirm-btn {
			text-align: center;
			position: fixed;
			bottom: 20rpx;
			margin: auto;
			left: 0;
			right: 0;
		}
	}

	.sample-container {
		display: flex;
		flex-direction: column;
		position: relative;

		.sample-top {
			display: flex;
			margin: 32rpx;

			.sample-title {
				display: flex;

				.sample-image {
					width: 240rpx;
					height: 240rpx;
					border-radius: 0rpx 0rpx 0rpx 0rpx;

					.image {
						width: 240rpx;
						height: 240rpx;
					}
				}

			}

			.sample-price {
				display: flex;
				flex-direction: column;
				justify-content: end;
				margin-left: 20rpx;

				>view {
					margin-top: 20rpx;
				}
			}
		}

		.sample-bottom {
			margin: 42rpx;

			.sample-title {
				height: 38rpx;
				font-family: HarmonyOS Sans SC, HarmonyOS Sans SC;
				font-weight: 400;
				font-size: 32rpx;
				color: #333333;
				line-height: 38rpx;
				margin-bottom: 12rpx;
			}

			.sample-list {
				.sample-item {
					display: flex;
					width: 600rpx;
					height: 88rpx;
					border-radius: 8rpx 8rpx 8rpx 8rpx;
					margin-bottom: 20rpx;
					line-height: 88rpx;
					background: #F6F6F6;

					.sample-title {
						display: flex;

						.sample-image {
							width: 64rpx;
							height: 64rpx;
							margin: 12rpx;

							.image {
								width: 240rpx;
								height: 240rpx;
							}
						}
					}

					.sample-price {
						display: flex;
						flex-direction: column;
						justify-content: end;
						margin-left: 20rpx;

						>view {
							margin-top: 20rpx;
						}
					}
				}

				.active {
					background: rgba(253, 45, 85, 0.2);
					border-radius: 8rpx 8rpx 8rpx 8rpx;
					border: 2rpx solid #FD2D55;
					color: #FD2D55;
				}
			}

			.bottom-button {
				position: fixed;
				bottom: 20rpx;
			}
		}
	}

	.card_discount {
		width: 178rpx;
		height: 40rpx;
		background: #FD2D55;
		border-radius: 4rpx 4rpx 4rpx 4rpx;
		display: flex;

		.card_discount_left {
			width: 102px;
			background-color: #fec0cc;
			font-family: HarmonyOS Sans SC, HarmonyOS Sans SC;
			line-height: 40rpx;
			text-align: left;
			font-style: normal;
			text-transform: none;
			text-align: center;
			align-items: center;
			color: #FD2D55;
			font-weight: bold;
			font-size: 24rpx;
		}

		.card_discount_right {
			width: 96rpx;
			font-family: HarmonyOS Sans SC, HarmonyOS Sans SC;
			font-weight: 500;
			font-size: 20rpx;
			color: #FFFFFF;
			line-height: 40rpx;
			text-align: center;
			opacity: 1;
		}
	}
</style>